<template>
  <view>
    <uv-toast ref="uToast"></uv-toast>
    <uv-no-network></uv-no-network>
    <Nav title="新增地址"></Nav>
    <Header></Header>
    <view class="addAddress">
      <view class="container">
        <uv-form :model="form" label-width="80px"
                 :rules="rules" ref="uForm">
          <uv-form-item
              label="联系人"
              prop="contact"
              border-bottom
              required
          >
            <uv-input
                v-model="form.contact"
                border="none"
                placeholder="收货人姓名"
            ></uv-input>
          </uv-form-item>
          <uv-form-item
              label="手机号"
              prop="phone"
              border-bottom
              required
          >
            <uv-input
                v-model="form.phone"
                border="none"
                placeholder="收货人电话号码"
            ></uv-input>
          </uv-form-item>
          <uv-form-item
              label="地址"
              prop="address"
              border-bottom
              @click="addressFn"
              required
          >
            <uv-input
                v-model="form.address"
                border="none"
                placeholder="请选择地址"
                :disabled="isAddressDisabled"
                disabled-color="#fff"
                suffix-icon="arrow-right"
            ></uv-input>
          </uv-form-item>
          <uv-form-item
              label="详细地址"
              prop="FullAddress"
              border-bottom
              required
          >
            <uv-input
                v-model="form.FullAddress"
                border="none"
                placeholder="请填写详细地址"
                disabled-color="#fff"
                suffix-icon="map-fill"
            ></uv-input>
          </uv-form-item>
          <uv-form-item
              label="设为默认"
              border-bottom
              prop="sets"
          >
            <uv-switch
                v-model="form.sets"></uv-switch>
          </uv-form-item>
        </uv-form>
        <uv-button
            type="primary"
            custom-style="margin-top:15px"
            @click="submit"
            text="提交" />
      </view>
    </view>
    <uv-picker
        ref="address"
        :columns="addressList"
        key-name="name"
        @change="change"
        @confirm="confirm"
    ></uv-picker>
  </view>
</template>

<script setup>
import Header from "@/components/header.vue";
import Nav from "@/components/nav.vue";
import { ref } from "vue";
import { address, addressList, addressFn, change } from "@/utils/address";
import { addAddress } from "@/request/api";

const uForm = ref(null);
const form = ref({
  contact: '',
  phone: '',
  address: '',
  FullAddress: '',
  sets: false
});
const rules = ref({
  contact: [
    { required: true, message: '请输入收货人姓名', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入收货人电话', trigger: 'blur' },
    {
      pattern: /^[1][3-9][0-9]{9}$/, // 验证手机号格式
      message: '请输入有效的手机号',
      trigger: 'blur'
    }
  ],
  address: [
    { required: true, message: '请输入收货人地址', trigger: 'blur' },
  ],
  FullAddress: [
    { required: true, message: '请输入详细地址', trigger: 'blur' },
  ],
  number: [
    { required: true, message: '请输入收货人门牌号', trigger: 'blur' },
  ]
});
const isAddressDisabled = ref(true); // 初始为 true

const confirm = (e) => {
  if (e.value && e.value.length === 3) {
    form.value.address = `${e.value[0].name}-${e.value[1].name}-${e.value[2].name}`;
    isAddressDisabled.value = false; // 选择后允许编辑
    console.log('确认选择的地址：', form.value.address);
  }
};

const submit = () => {
  uForm.value.validate().then(res => {
    if (res) {
      uni.showLoading({ title: '提交中...' });
      console.log(form.value, '000')
      addAddress({consignee: form.value.contact, phone: form.value.phone, address: `${form.value.address} ${form.value.FullAddress}`})
          .then(res => {
            if(res.code === 0){
              uni.hideLoading();
              uni.showToast({
                title: '地址提交成功！',
                icon: 'success'
              });
              resetForm();
              setTimeout(() => {
                uni.navigateTo({
                  url: '/pages/setting/address/address'
                })
              },100)
            }
          })
          .catch(error => {
            uni.hideLoading();
            uni.showToast({
              title: '提交失败，请重试！',
              icon: 'error'
            });
            console.error('提交地址失败:', error);
          });
    } else {
      uni.showToast({ icon: 'error', title: '请填写完整信息！' });
      return false;
    }
  });
};

const resetForm = () => {
  form.value = {
    contact: '',
    phone: '',
    address: '',
    FullAddress: '',
    sets: false
  };
  isAddressDisabled.value = true; // 重置地址选择状态
};

</script>

<style lang="scss" scoped>
.addAddress{
  height: calc(100vh - 88px);
  width: 100%;
  box-sizing: border-box;
  overflow-y: scroll;
  //border: 1px solid red;
  padding: 0 20px;
  background-color: #f7f7f8;
  &::-webkit-scrollbar {
    display: none;
  }
  .container{
    margin-top: 10px;
    background-color: #FFFFFF;
    padding: 15px;
    width: 100%;
    border-radius: 8px;
    box-sizing: border-box;
  }
}
</style>
